<template>
	<view class="wrap">
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" placeholder-class="line" v-model="address.name" placeholder="请填写收货人姓名" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="text" placeholder-class="line" v-model="address.phone" placeholder="请填写收货人手机号" />
			</view>
			<view class="item" @click="showRegionPicker">
				<view class="left">所在地区</view>
				<text style="font-size: 32rpx;">{{ region }}</text>
				<!-- <input disabled type="text" placeholder-class="line" v-model="region" placeholder="省市区县、乡镇等" /> -->
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" placeholder-class="line" v-model="address.street" placeholder="街道、楼牌/门牌号等" />
			</view>

			<view class="tips">提醒：每次下单会默认推荐该地址</view>
		</view>

		<u-picker mode="region" ref="uPicker" :default-region="defaultRegion" v-model="show" :params="params" @confirm="confirm" />
		<view class="u-padding-30" style="background-color: #fff">
			<u-button type="success" @click="saveAddress">保存</u-button>
		</view>
		<wx-share :title="shop.name" :desc="shop.store_introduction" :imgUrl="shop.cover" :link="currentPage" ref="wxs"></wx-share>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			defaultRegion: ['四川省', '成都市', '锦江区'],
			params: {
				province: true,
				city: true,
				area: true
			},
			user: {
				address: {}
			},
			address: {
				id: '',
				province: '',
				city: '',
				district: '',
				street: '',
				phone: '',
				name: ''
			},
			shop: {}
		};
	},
	computed: {
		region() {
			return this.address.province + this.address.city + this.address.district;
		},
		currentPage() {
			return location.href;
		}
	},
	onShow() {
		this.getUserInfo();
	},
	onLoad() {
		this.getShop();
	},
	methods: {
		getShop() {
			this.$u
				.post('/shopping/shop-setting', {})
				.then((res) => {
					this.shop = res;
				})
				.catch((e) => {});
		},
		getUserInfo() {
			this.$u
				.post('/user/info', {})
				.then((res) => {
					this.user = res;

					if (res.address && res.address.province && res.address.city && res.address.district) {
						this.defaultRegion = [res.address.province, res.address.city, res.address.district];
					}
					if (this.user.address) {
						if (this.user.address.id) {
							this.address.id = this.user.address.id;
						}
						if (this.user.address.province) {
							this.address.province = this.user.address.province;
						}
						if (this.user.address.city) {
							this.address.city = this.user.address.city;
						}
						if (this.user.address.district) {
							this.address.district = this.user.address.district;
						}
						if (this.user.address.street) {
							this.address.street = this.user.address.street;
						}
						if (this.user.address.name) {
							this.address.name = this.user.address.name;
						} else {
							this.address.name = this.user.name;
						}
						if (this.user.address.phone) {
							this.address.phone = this.user.address.phone;
						} else {
							this.address.phone = this.user.mobile;
						}
					}
				})
				.catch((e) => {
					console.log(e);
				});
		},
		saveAddress() {
			this.$u
				.post('/user-address/save-user-address', this.address)
				.then((res) => {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					});
					uni.navigateBack({}); 
				})
				
				.catch((e) => {
					console.log(e);
				});
		},
		showRegionPicker() {
			this.show = true;
		},
		setRegion(e) {
			console.log(e);
		},
		confirm(e) {
			this.address.province = e.province.label;
			this.address.city = e.city.label;
			this.address.district = e.area.label;
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .line {
	color: $u-light-color;
	font-size: 28rpx;
}

.wrap {
	background-color: #f2f2f2;

	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;

		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;

			.left {
				width: 180rpx;
			}

			input {
				text-align: left;
			}
		}

		.address {
			padding: 20rpx 0;

			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}

		.site-clipboard {
			padding-right: 40rpx;

			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}

			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;

				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;

		.tag {
			display: flex;

			.left {
				width: 160rpx;
			}

			.right {
				display: flex;
				flex-wrap: wrap;

				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}

				.plus {
					//padding: 10rpx 0;
				}
			}
		}

		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;

			.tips {
				font-size: 24rpx;
			}

			.right {
			}
		}
	}
}
</style>
